<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="微信公众号开发Django-图片处理"/>




  <meta name="keywords" content="Django, 微信公众号, 八一" />



  <meta name="baidu-site-verification" content="HhUstaSjr0" />



  <meta name="google-site-verification" content="UA-102975942-1" />






  <link rel="alternate" href="/atom.xml" title="八一">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.6.0" />



<link rel="canonical" href="https://bay1.top/2018/06/21/微信公众号开发Django-图片处理/"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.6.0" />
<link rel="stylesheet" type="text/css" href="/css/prettify.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/sons-of-obsidian.css" media="screen" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />




  
  <script id="baidu_analytics">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9a885cc9fb6cd7bcef579deb8efe8a70";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <script id="google_analytics">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-102975942-1', 'auto');
        ga('send', 'pageview');
  </script>










    <title> 微信公众号开发Django-图片处理 - 八一 </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">八一</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/archives">
        <li class="mobile-menu-item">
          
          
            文章
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            关于/友链
          
        </li>
      </a>
    
      <a href="/search">
        <li class="mobile-menu-item">
          
          
            站内搜索
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">八一</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives">
            
            
              文章
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              关于/友链
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/search">
            
            
              站内搜索
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          微信公众号开发Django-图片处理
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2018-06-21
        </span>
        
        
        
      </div>
    </header>

    
    

    <div class="post-content">
      
        <p>微信公众号开发，图片处理部分<a id="more"></a></p>
<blockquote>
<p>上篇文章已经获取了wx的接口权限<br>本来想直接使用wx的图像接口,但是后来发现处理js动作有点小麻烦<br>还有些莫名的错误,就选择了好用的<a href="https://github.com/Tencent/weui.js" target="_blank" rel="noopener">weui.js</a><br>挺好用~</p>
</blockquote>
<p>(为了少走弯路，建议直接用weui.js)</p>
<p>首先我们设置后端代码接收前端post,在上篇文章已经提到</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Image字段</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Image</span><span class="params">(models.Model)</span>:</span></span><br><span class="line">    file = models.ImageField(<span class="string">'图片'</span>, upload_to=image_filename, blank=<span class="keyword">True</span>)</span><br><span class="line">    name = models.CharField(<span class="string">'文件名'</span>, blank=<span class="keyword">True</span>, null=<span class="keyword">True</span>, max_length=<span class="number">256</span>)</span><br><span class="line">    uploaded_by = models.ForeignKey(FansProfile, verbose_name=<span class="string">'上传者'</span>, on_delete=models.CASCADE)</span><br><span class="line"></span><br><span class="line">    created_time = models.DateTimeField(<span class="string">'创建时间'</span>, auto_now_add=<span class="keyword">True</span>)</span><br><span class="line">    last_modify_time = models.DateTimeField(<span class="string">'最后修改时间'</span>, auto_now=<span class="keyword">True</span>)</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">activity</span><span class="params">(View)</span>:</span></span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">post</span><span class="params">(self,request,*args, **kwargs)</span>:</span></span><br><span class="line">        request_type = request.POST.get(<span class="string">'type'</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> request_type:</span><br><span class="line">            <span class="keyword">pass</span> <span class="comment"># 处理ticket获取</span></span><br><span class="line">        <span class="keyword">elif</span> request_type == <span class="string">'image/jpeg'</span>:</span><br><span class="line">            files = request.FILES.getlist(<span class="string">'fileVal'</span>)[<span class="number">0</span>]</span><br><span class="line">            filename = request.POST.dict()[<span class="string">'name'</span>]</span><br><span class="line">            uploader_id = request.COOKIES.get(<span class="string">'fanid'</span>,<span class="string">''</span>)</span><br><span class="line">            check_id = FansProfile.objects.filter(id=uploader_id).first()</span><br><span class="line">            <span class="keyword">if</span> <span class="keyword">not</span> check_id:</span><br><span class="line">                <span class="keyword">return</span> HttpResponseRedirect(web_get_code+<span class="string">'snsapi_base#wechat_redirect'</span>)</span><br><span class="line">            post_image = Image(file = files) <span class="comment"># Image数据库模型</span></span><br><span class="line">            post_image.uploaded_by = check_id</span><br><span class="line">            post_image.name = filename.split(<span class="string">'.'</span>)[:<span class="number">-1</span>][<span class="number">0</span>]</span><br><span class="line">            post_image.save()</span><br><span class="line">            <span class="keyword">return</span> HttpResponse(json.dumps(&#123;<span class="string">'statue'</span>:<span class="keyword">True</span>&#125;),content_type=<span class="string">"application/json"</span>)</span><br></pre></td></tr></table></figure>
<p>然后来到前端，下面是简单的实现<br>就是weui.js文档和演示html的堆砌<br>详情点击<a href="https://github.com/Tencent/weui.js/blob/master/docs/README.md" target="_blank" rel="noopener">weui.js-docs</a><br><a href="https://weui.io/weui.js/" target="_blank" rel="noopener">weui.js预览</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br></pre></td><td class="code"><pre><span class="line">&#123;% load static %&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    $(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> uploadCountDom = <span class="built_in">document</span>.getElementById(<span class="string">"uploadCount"</span>)</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> url = location.href.split(<span class="string">'#'</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> uploadCount = <span class="number">0</span>,</span></span><br><span class="line"><span class="undefined">            uploadList = [];</span></span><br><span class="line"><span class="javascript">        $(<span class="string">'#uploaderInput'</span>).on(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="actionscript">                weui.uploader(<span class="string">'#uploader'</span>, &#123;</span></span><br><span class="line"><span class="undefined">                    url: url,</span></span><br><span class="line"><span class="actionscript">                    auto: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">                    type: <span class="string">'file'</span>,</span></span><br><span class="line"><span class="actionscript">                    fileVal: <span class="string">'fileVal'</span>,</span></span><br><span class="line"><span class="undefined">                    compress: &#123;</span></span><br><span class="line"><span class="undefined">                        width: 1600,</span></span><br><span class="line"><span class="undefined">                        height: 1600,</span></span><br><span class="line"><span class="undefined">                        quality: .8</span></span><br><span class="line"><span class="undefined">                    &#125;,</span></span><br><span class="line"><span class="actionscript">                    onBeforeQueued: <span class="function"><span class="keyword">function</span> <span class="params">(files)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// `this` 是轮询到的文件, `files` 是所有文件</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">if</span> ([<span class="string">"image/jpg"</span>, <span class="string">"image/jpeg"</span>, <span class="string">"image/png"</span>, <span class="string">"image/gif"</span>].indexOf(<span class="keyword">this</span>.type) &lt; <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="actionscript">                            weui.alert(<span class="string">'请上传图片'</span>);</span></span><br><span class="line"><span class="actionscript">                            <span class="keyword">return</span> <span class="literal">false</span>; <span class="comment">// 阻止文件添加</span></span></span><br><span class="line"><span class="undefined">                        &#125;</span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">if</span> (<span class="keyword">this</span>.size &gt; <span class="number">10</span> * <span class="number">1024</span> * <span class="number">1024</span>) &#123;</span></span><br><span class="line"><span class="actionscript">                            weui.alert(<span class="string">'请上传不超过10M的图片'</span>);</span></span><br><span class="line"><span class="actionscript">                            <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="undefined">                        &#125;</span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">if</span> (files.length &gt; <span class="number">5</span>) &#123; <span class="comment">// 防止一下子选择过多文件</span></span></span><br><span class="line"><span class="actionscript">                            weui.alert(<span class="string">'最多只能上传5张图片，请重新选择'</span>);</span></span><br><span class="line"><span class="actionscript">                            <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="undefined">                        &#125;</span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">if</span> (uploadCount + <span class="number">1</span> &gt; <span class="number">5</span>) &#123;</span></span><br><span class="line"><span class="actionscript">                            weui.alert(<span class="string">'最多只能上传5张图片'</span>);</span></span><br><span class="line"><span class="actionscript">                            <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="undefined">                        &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">                        ++uploadCount;</span></span><br><span class="line"><span class="undefined">                        uploadCountDom.innerHTML = uploadCount</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// return true; // 阻止默认行为，不插入预览图的框架</span></span></span><br><span class="line"><span class="undefined">                    &#125;,</span></span><br><span class="line"><span class="actionscript">                    onQueued: <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                        uploadList.push(<span class="keyword">this</span>);</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(<span class="keyword">this</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'</span></span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。</span></span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// this.stop(); // 中断上传</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// return true; // 阻止默认行为，不显示预览图的图像</span></span></span><br><span class="line"><span class="undefined">                    &#125;,</span></span><br><span class="line"><span class="actionscript">                    onBeforeSend: <span class="function"><span class="keyword">function</span> <span class="params">(data, headers)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(<span class="keyword">this</span>, data, headers);</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// $.extend(data, &#123; test: 1 &#125;); // 可以扩展此对象来控制上传参数</span></span></span><br><span class="line"><span class="javascript">                        $.extend(headers, &#123; <span class="string">'X-CSRFToken'</span>: <span class="string">'&#123;&#123; csrf_token &#125;&#125;'</span> &#125;); <span class="comment">// 可以扩展此对象来控制上传头部</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// return false; // 阻止文件上传</span></span></span><br><span class="line"><span class="undefined">                    &#125;,</span></span><br><span class="line"><span class="actionscript">                    onProgress: <span class="function"><span class="keyword">function</span> <span class="params">(procent)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(<span class="keyword">this</span>, procent);</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// return true; // 阻止默认行为，不使用默认的进度显示</span></span></span><br><span class="line"><span class="undefined">                    &#125;,</span></span><br><span class="line"><span class="actionscript">                    onSuccess: <span class="function"><span class="keyword">function</span> <span class="params">(ret)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(<span class="keyword">this</span>, ret);</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// return true; // 阻止默认行为，不使用默认的成功态</span></span></span><br><span class="line"><span class="undefined">                    &#125;,</span></span><br><span class="line"><span class="actionscript">                    onError: <span class="function"><span class="keyword">function</span> <span class="params">(err)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(<span class="keyword">this</span>, err);</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">// return true; // 阻止默认行为，不使用默认的失败态</span></span></span><br><span class="line"><span class="undefined">                    &#125;</span></span><br><span class="line"><span class="undefined">                &#125;);</span></span><br><span class="line"><span class="undefined">        &#125;)</span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 缩略图预览</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.querySelector(<span class="string">'#uploaderFiles'</span>).addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> target = e.target;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">while</span> (!target.classList.contains(<span class="string">'weui-uploader__file'</span>) &amp;&amp; target) &#123;</span></span><br><span class="line"><span class="undefined">                target = target.parentNode;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">if</span> (!target) <span class="keyword">return</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> url = target.getAttribute(<span class="string">'style'</span>) || <span class="string">''</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> id = target.getAttribute(<span class="string">'data-id'</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">if</span> (url) &#123;</span></span><br><span class="line"><span class="javascript">                url = url.match(<span class="regexp">/url\((.*?)\)/</span>)[<span class="number">1</span>].replace(<span class="regexp">/"/g</span>, <span class="string">''</span>);</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> gallery = weui.gallery(url, &#123;</span></span><br><span class="line"><span class="actionscript">                className: <span class="string">'custom-name'</span>,</span></span><br><span class="line"><span class="actionscript">                onDelete: <span class="function"><span class="keyword">function</span> <span class="title">onDelete</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    weui.confirm(<span class="string">'确定删除该图片？'</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="undefined">                        --uploadCount;</span></span><br><span class="line"><span class="undefined">                        uploadCountDom.innerHTML = uploadCount;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = uploadList.length; i &lt; len; ++i) &#123;</span></span><br><span class="line"><span class="actionscript">                            <span class="keyword">var</span> file = uploadList[i];</span></span><br><span class="line"><span class="actionscript">                            <span class="keyword">if</span> (file.id == id) &#123;</span></span><br><span class="line"><span class="undefined">                                file.stop();</span></span><br><span class="line"><span class="actionscript">                                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="undefined">                            &#125;</span></span><br><span class="line"><span class="undefined">                        &#125;</span></span><br><span class="line"><span class="undefined">                        target.remove();</span></span><br><span class="line"><span class="undefined">                        gallery.hide();</span></span><br><span class="line"><span class="undefined">                    &#125;);</span></span><br><span class="line"><span class="undefined">                &#125;</span></span><br><span class="line"><span class="undefined">            &#125;);</span></span><br><span class="line"><span class="undefined">        &#125;);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.querySelector(<span class="string">'#images-del'</span>).addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="actionscript">            options.onDelete.call(<span class="keyword">this</span>, url);</span></span><br><span class="line"><span class="undefined">        &#125;);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.querySelector(<span class="string">'#confirmBtn'</span>).addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="actionscript">            weui.confirm(<span class="string">'确定提交吗?'</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                uploadList.forEach(<span class="function"><span class="keyword">function</span> <span class="params">(file)</span> </span>&#123;</span></span><br><span class="line"><span class="undefined">                    file.upload();</span></span><br><span class="line"><span class="undefined">                &#125;);</span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">'yes'</span>);</span></span><br><span class="line"><span class="actionscript">            &#125;, <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">'no'</span>);</span></span><br><span class="line"><span class="undefined">            &#125;, &#123;</span></span><br><span class="line"><span class="actionscript">                    title: <span class="string">'提交确认'</span></span></span><br><span class="line"><span class="undefined">                &#125;);</span></span><br><span class="line"><span class="undefined">        &#125;);</span></span><br><span class="line"><span class="undefined">    &#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-gallery"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"weui-gallery__img"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-gallery__opr"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:"</span> <span class="attr">class</span>=<span class="string">"weui-gallery__del"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"weui-icon-delete weui-icon_gallery-delete"</span> <span class="attr">id</span>=<span class="string">"images-del"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-cells weui-cells_form"</span> <span class="attr">id</span>=<span class="string">"uploader"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-cell"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-cell__bd"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-uploader"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-uploader__hd"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"weui-uploader__title"</span>&gt;</span>图片上传<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-uploader__info"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"uploadCount"</span>&gt;</span>0<span class="tag">&lt;/<span class="name">span</span>&gt;</span>/5<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-uploader__bd"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"weui-uploader__files"</span> <span class="attr">id</span>=<span class="string">"uploaderFiles"</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-uploader__input-box"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"uploaderInput"</span> <span class="attr">class</span>=<span class="string">"weui-uploader__input"</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">accept</span>=<span class="string">"image/*"</span> <span class="attr">capture</span>=<span class="string">"camera"</span> <span class="attr">multiple</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weui-btn-area"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"weui-btn weui-btn_primary"</span> <span class="attr">href</span>=<span class="string">"javascript:"</span> <span class="attr">id</span>=<span class="string">"confirmBtn"</span>&gt;</span>确定<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="http://on2mh1s1f.bkt.clouddn.com/wechat.gif" alt=""></p>

      
    </div>

    
      
      



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/Django/">Django</a>
            
              <a href="/tags/微信公众号/">微信公众号</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
    
      <a class="next" href="/2018/06/21/微信公众号开发Django-JSSDK授权/">
        <span class="next-text nav-default">微信公众号开发Django-JSSDK授权</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div> 
    </div>
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="https://github.com/bay1" class="iconfont icon-github" title="github"></a>
        
      
    
      
        
          <a href="http://weibo.com/3190704711/profile?topnav=1&wvr=6&is_all=1" class="iconfont icon-weibo" title="weibo"></a>
        
      
    
      
    
      
    
      
    
    
    
  </div>


<div class="copyright">
  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2018
    <span class="author">bay1</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://bay1.top/2018/06/21/微信公众号开发Django-图片处理/';
        this.page.identifier = '2018/06/21/微信公众号开发Django-图片处理/';
        this.page.title = '微信公众号开发Django-图片处理';
    };
    (function() {
    var d = document, s = d.createElement('script');

    s.src = '//https-blog-flywinky-top-1.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();  
  </script>



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.6.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.6.0"></script>
<script src="/js/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('pre').addClass('prettyprint');
   prettyPrint();
 })
</script>
  </body>
</html>
